@use '@scss/common' as *;

.filterBar {
  @include formInput;
  & {
    display: flex;
    align-items: center;
    position: relative;
    height: 3rem;
  }

  @include mid-break {
    left: 0;
    width: 100%;
    right: 0;
    margin-bottom: 0;
  }
}

.searchInput {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  flex-grow: 1;
  height: 2rem;
  margin-right: 0.5rem;
  text-transform: none;

  &::placeholder {
    color: black;
  }

  &:focus {
    outline: none;
  }
}

.searchIcon {
  display: flex;
  align-items: center;
  width: 1rem;
  height: 1rem;
}

:global([data-theme='light']) {
  .searchIcon {
    & path {
      stroke: var(--color-base-300);
    }
  }
}
